<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子的内补丁</title>
  <style>
    span{
      width: 500px;
      height: 200px;
      background-color: lightcoral;
      border:1px solid blue;
    }
    /*内补丁：设置盒子内容与边框之间的间距*/
    /*1. 分别设置盒子的上、右、下、左四个方向的内补丁（设置四个值）*/
    .sp1{
      /*padding-top: 10px;*/
      /*padding-right:15px;*/
      /*padding-bottom: 20px;*/
      /*padding-left: 25px;*/
      /*可以简化为：*/
      padding: 10px 15px 20px 25px;    /*一起写的话，就是上、右、下、左*/
    }
    /*2. 分别设置上、左右、下内补丁的值（设置三个值）*/
    .sp2{
      padding: 10px 15px 20px;
    }
    /*3. 分别设置上下、左右两个方向的值（设置两个值）*/
    .sp3{
      padding: 15px 20px;
    }
    /*4. 分别设置上右下左是一个值的情况(此时四个内补丁间距相等)*/
    .sp4{
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>1. 盒子的内补丁四个值(四个方向分别设置)<hr></h1>
  <span class="sp1">
    盒子的内补丁(四个方向分别设置)
  </span>
  <h1>2. 盒子的内补丁三个值(分别设置上、左右、下)<hr></h1>
  <span class="sp2">
    盒子的内补丁(分别设置上、左右、下内补丁)
  </span>
  <h1>3. 盒子的内补丁两个值(分别设置上下、左右)<hr></h1>
  <span class="sp3">
    盒子的内补丁(分别设置上下、左右)
  </span>
  <h1>4. 盒子的内补丁一个值(分别设置上右下左)<hr></h1>
  <span class="sp4">
    盒子的内补丁(分别设置上右下左)
  </span>
</body>
</html>
